<template>
  <div>
    <h1>detail:{{ type }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Detail',
});
</script>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { computed, watch } from 'vue';

/* 
     useRoute 
       返回当前路由地址，相当于在模板中使用 $route 。必须在 setup() 中调用
       只要动态路由参数发生变化，route对象就会随之改变
*/

const route = useRoute();

// 动态的获取动态路由参数
const type = computed(() => {
  return route.params.type;
});

watch(route, () => {
  console.log('route变了', route.params.type);
});
</script>

<style lang="less" scoped></style>
